<template>
  <div>

    <HeaderTop :enable-shadow="true"/>

    <div>
      <TitleNode :title-text="typeData.title"
                 :title-text2="typeData.desc"
                 position="center" />
    </div>

    <div class="al-box-container">
      <div class="al-width-80">
        <div v-if="allAppointment.list != 0">
          <ShowAppointmentComponent mode="list-h" :all-appointment="allAppointment.list"/>

          <!--分页-->
          <div class="al-box-container">
            <el-pagination
                    v-if="allAppointment.list != 0"
                    background
                    :page-size="allAppointment.pageSize"
                    @next-click="getAppointmentByTypeId(typeId, allAppointment.nextPage)"
                    @prev-click="getAppointmentByTypeId(typeId, allAppointment.prePage)"
                    @current-change="handlePageChange"
                    layout="prev, pager, next"
                    :total="allAppointment.total">
            </el-pagination>
          </div>
        </div>

        <div v-else>
          <EmptyTip />
        </div>
      </div>
    </div>

    <ALFooter/>
  </div>
</template>

<script>
  import {request} from "../../util/network/request";
  import {APPOINTMENT_GET_BY_TYPE_ID} from "../../util/network/api/appointment/api-appointment";
  import ShowAppointmentComponent from "./component/ShowAppointmentComponent";
  import HeaderTop from "../../components/public/HeaderTop";
  import ALFooter from "../../components/public/ALFooter";
  import EmptyTip from "../../components/public/EmptyTip";
  import TitleNode from "../../components/public/TitleNode";

  export default {
    name: "AppointmentTypePage",
    //组件
    components: {TitleNode, EmptyTip, ALFooter, HeaderTop, ShowAppointmentComponent},
    //属性
    props: {},

    //数据
    data() {
      return {
        typeId: this.$route.params.id,
        typeData:[
          {
            title: '',
            desc: ''
          }
        ],
        allAppointment: {},

      }
    },

    //挂载完成时
    mounted() {
      this.getAppointmentByTypeId(this.typeId);
      this.showTypeTitle(this.typeId);

    },

    //方法
    methods: {
      //通过约拍类型id获取约拍
      getAppointmentByTypeId(typeId, pageNum = 1, pageSize = 4) {
        request({
          url: APPOINTMENT_GET_BY_TYPE_ID + typeId + `?pageNum=${pageNum}&pageSize=${pageSize}`,
        }).then(res => {
          // console.log(res);
          this.allAppointment = res.data.data;

        }).catch(err => {
          console.log(err)
        })
      },

      //分页页号点击事件
      handlePageChange(pageNum) {
        this.getAppointmentByTypeId(this.typeId, pageNum)
      },

      //显示类型标题
      showTypeTitle(typeId){
        switch (typeId) {
          case "1":
            this.typeData.title = "普通拍照";
            this.typeData.desc = "定格瞬间，留住时光";
            break;
          case "2":
            this.typeData.title = "毕业照";
            this.typeData.desc = "时光不老，我们不散";
            break;
          case "3":
            this.typeData.title = "婚纱照";
            this.typeData.desc = "";
            break;
          case "4":
            this.typeData.title = "电商模特";
            this.typeData.desc = "";
            break;
          default:
            break;
        }
      }

    },

    //计算属性
    computed: {},

    //监听
    watch: {}
  }
</script>

<style scoped>

</style>
